{% assign textAlign = "left, center, right" | split: ", " %}
{% assign index = section.settings.text_alignment |  abs %}
{% stylesheet %}
.block_blog .blog_list ul {
    display: grid;
    row-gap: 40px;
    column-gap: 30px;
    grid-template-columns: repeat(2, calc(50% - 15rem));
}

.block_blog .blog_list_3 ul {
    grid-template-columns: repeat(3, calc(33.3333% - 20px));
}

.block_blog .blog_list_4 ul {
    grid-template-columns: repeat(4, calc(25% - 22.5px));
}

.block_blog .blog_list_5 ul {
    grid-template-columns: repeat(5, calc(20% - 24px));
}

.block_blog .blog_list li {
    list-style-type: none;
    overflow: hidden;
}

.block_blog .blog_iamge {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.block_blog .blog_iamge .block_iamge_pic{
    width: 100%;
    height: 100%;
}
.block_blog .blog_iamge img {
    width: 100%;
}
.block_blog .blog_iamge .block_iamge_name {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(0, 0, 0, .2);
    color: #fff;
    font-size: 24px;
    font-family: var(--title_font_family);
    font-style: var(--title_font_style);
    font-weight: var(--title_font_weigth);
    letter-spacing: var(--title_letter_spacing);
}
.block_blog .blog_time {
    margin-bottom: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.block_blog .blog_name {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--title_color);
    font-size: var(--product_font_size);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.block_blog .blog_descript {
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: var(--detail_color);
}

.block_blog .blog_more {
    color: var(--detail_color);
    text-decoration: underline;
    transition: all 0.3s;
}
.block_blog .blog_more:hover{
    color: var(--title_color);
}
.block_blog .block_blog_more{
    text-align: center;
    margin-top: calc(var(--general_layout_spacing) * 0.5);
}
.block_blog .block_blog_more a{
    margin: 0;
}


@media (max-width: 767px) {
    .block_blog .blog_list ul {
        display: block;
    }
    .block_blog .blog_list li {
        margin-bottom: 30px;
    }
    .block_blog .blog_list li:last-child{
        margin-bottom: 0;
    }
    .block_blog .blog_iamge{
        margin-bottom: 20px;
    }
}
{% endstylesheet %}
<div class="block_blog">
    <div class="container_wrapper {% if section.settings.full_screen %}full_container_wrapper{% endif %}">
        {% if section.settings.title != '' or section.settings.detail != '' %}
        <div class="block_title">
            {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
            {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail }}</div>{% endif %}
        </div>
        {% endif %}
        <!-- 1fr -->
        <div class="blog_list blog_list_{{ section.settings.pc_number }}">
            <ul style=" grid-template-columns: repeat({{ section.settings.pc_number  }}, 1fr);">
                {% assign blogs_ids = section.blocks | get_array_values: "blog" | get_array_values: "id" | join: "," %}
               
                {% if section.blocks.size %}
                {% get_blogs ids={blogs_ids} %}
                <script type="text/javascript">
                console.log({{blogs | json}})
                </script>
                {% for block in section.blocks %}
                {% assign id = block.blog.id %}
                  {% if blogs[id].size > 1  %} 
                    {% assign blog = blogs[id] %}
                      <li style="text-align: {{ textAlign[index]  }} ;">
                          {% if section.settings.cover_picture %}
                          
                          <a class="blog_iamge" href="/blogs/{{ blog.handle }}">
                            <img class="lazyload" data-src="{{blog.src}}" src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ blog.title }}">
                          </a>
                          {% endif %}
                          <a class="blog_name text-white-space" href="/blogs/{{ blog.handle }}">{{ blog.title }}</a>
                          {% if section.settings.blog_descript %}
                          <div class="blog_descript line-clamp2" style="text-align: {{ textAlign[index]  }} ;">{{ blog.descript }}</div>
                          {% endif %}
                          {% if section.settings.date or section.settings.author %}
                          <div class="blog_time">
                            {% if section.settings.date %}
                            <span data-date="{{blog.created_at}}" data-format="YYYY-mm-dd">{{ blog.published_at | date: "%Y-%m-%d" }}</span>
                            {% endif %}
                            {% if section.settings.author %}{{ blog.author_name }}{% endif %}
                          </div>
                          {% endif %}
                          {% if section.settings.read_now %}
                          <a class="blog_more" href="/blogs/{{ blog.handle }}">{{section.settings.read_now}}</a>
                          {% endif %}
                      </li>
                      {% else %}
                      <li style="text-align: {{ textAlign[index] }} ;">
                        {% if section.settings.cover_picture %}
                        <a class="blog_iamge" href="javascript:;" data-tips="请选择博客">
                          <img src="{{ 'empty.png' | public_asset_abs_url }}">
                        </a>
                        {% endif %}
                        <a class="blog_name" href="javascript:;"  data-tips="请选择博客">the printing and typesetting industry</a>
                        {% if section.settings.blog_descript %}
                        <div class="blog_descript" style="text-align: {{ textAlign[index] }} ;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                        {% endif %}

                        {% if section.settings.date or section.settings.author %}
                        <div class="blog_time">
                        {% if section.settings.date %}2021-11-17{% endif %}
                        {% if section.settings.author %}author{% endif %}</div>
                        {% endif %}
                        {% if section.settings.read_now %}
                        <a class="blog_more" href="javascript:;"  data-tips="请选择博客">{{section.settings.read_now}}</a>
                        {% endif %}
                       </li>
                  {% endif %}

                {% endfor %}
                {% else %}
                {% for i in (1..section.settings.pc_number) %}
                <li style="text-align: {{ textAlign[index] }} ;">
                    {% if section.settings.cover_picture %}
                    <a class="blog_iamge" href="javascript:;" data-tips="请选择博客">
                      <img src="{{ 'empty.png' | public_asset_abs_url }}">
                    </a>
                    {% endif %}
                    <a class="blog_name" href="javascript:;"  data-tips="请选择博客">the printing and typesetting industry</a>
                    {% if section.settings.blog_descript %}
                    <div class="blog_descript" style="text-align: {{ textAlign[index] }} ;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                    {% endif %}

                    {% if section.settings.date or section.settings.author %}
                    <div class="blog_time">
                    {% if section.settings.date %}2021-11-17{% endif %}
                    {% if section.settings.author %}author{% endif %}</div>
                    {% endif %}
                    {% if section.settings.read_now %}
                    <a class="blog_more" href="javascript:;"  data-tips="请选择博客">{{section.settings.read_now}}</a>
                    {% endif %}

                </li>
                {% endfor %}
                {% endif %}
            </ul>
        </div>
        {% if section.settings.more_text != ""%}
        <div class="block_blog_more"><a class="secondary_btn" href="/blogs">{{ section.settings.more_text }}</a></div>
        {% endif %}
    </div>
</div>

{% schema %}

{
  "tag": "section",
  "class": "block_blogs",
  "is_global": false,
  "name": {
    "zh_CN": "博客"
  },
  "max_blocks": 10,
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置"
      }
    },
    {
      "type": "card_input",
      "id": "title",
      "label": {
        "zh_CN": "标题"
      },
      "placeholder": {
        "zh_CN": "请输入标题"
      },
      "default": "From our blog"
    },
    {
      "type": "card_text_editor",
      "id": "detail",
      "label": {
        "zh_CN": "简短描述"
      },
      "placeholder": {
        "zh_CN": "请输入描述"
      },
      "default": "Detail"
    },
    {
      "type": "card_switch",
      "id": "full_screen",
      "label": {
        "zh_CN": "宽度铺满"
      }
    },
    {
      "type": "card_switch",
      "id": "date",
      "label": {
        "zh_CN": "显示日期"
      },
      "default": true
    },
    {
      "type": "card_switch",
      "id": "author",
      "label": {
        "zh_CN": "显示作者"
      },
      "default": "true"
    },
    {
      "type": "card_switch",
      "id": "cover_picture",
      "label": {
        "zh_CN": "显示封面图片"
      },
      "default": true
    },
    {
      "type": "card_switch",
      "id": "blog_descript",
      "label": {
        "zh_CN": "显示简短描述"
      }
    },
    {
      "type": "card_select",
      "id": "text_alignment",
      "label": {
        "zh_CN": "文字对齐方式"
      },
      "option": [
        {
          "label": {
            "zh_CN": "左对齐"
          },
          "value": "0"
        },
        {
          "label": {
            "zh_CN": "居中"
          },
          "value": "1"
        },
        {
          "label": {
            "zh_CN": "右对齐"
          },
          "value": "2"
        }
      ],
      "default": "0"
    },
    {
      "type": "card_slider",
      "id": "pc_number",
      "max": "5",
      "min": "2",
      "label": {
        "zh_CN": "每排数量"
      },
      "info": {
        "zh_CN": "只对pc有效"
      },
      "default": "3"
    },
    {
      "type": "card_input",
      "id": "read_now",
      "label": {
        "zh_CN": "阅读全文文案"
      }
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "查看更多文案"
      },
      "id": "more_text"
    }
  ],
  "blocks": [
    {
      "name": {
        "zh_CN": "博客"
      },
      "type": "blogs-items",
      "settings": [
        {
          "type": "card_blog",
          "id": "blog",
          "label": {
            "zh_CN": "博客"
          },
          "default": {
            "id": "",
            "title": ""
          }
        }
      ]
    }
  ],
  "default": {
    "settings": {
      "title": "Blog",
      "detail": "",
      "full_screen": false,
      "date": true,
      "author": false,
      "cover_picture": true,
      "blog_descript": true,
      "text_alignment": "1",
      "pc_number": "3",
      "read_now":"Read More >",
      "more_text":"View More"
    },
    "blocks": [
      {
        "blog": {
          "id": "",
          "title": ""
        },
        "block_type": "blogs-items"
      },
      {
        "blog": {
          "id": "",
          "title": ""
        },
        "block_type": "blogs-items"
      },
      {
        "blog": {
          "id": "",
          "title": ""
        },
        "block_type": "blogs-items"
      }
    ]
  }
}
{% endschema %}